<template>
    <view class="box">
        <!-- <u-navbar title="阀贸通" placeholder autoBack border></u-navbar> -->
        <view class="banner">
            <image class="img" mode="widthFix" src="../../static/sjhb@3x.png" :style="{ height: imgHeight + 'px' }"
                @load="onImgLoad" />
        </view>
        <view class="flex">
            <!-- <u-dropdown ref="uDropdown" activeColor="#2979ff" :borderBottom="true"
                style="width: 28%; background-color: #fff;">
                <u-dropdown-item v-model="form.value" title="类型" :options="options"></u-dropdown-item>
            </u-dropdown>
            <u-dropdown ref="uDropdown" activeColor="#2979ff" :borderBottom="true"
                style="width: 28%; background-color: #fff;">
                <u-dropdown-item v-model="form.value1" title="区域" :options="options"></u-dropdown-item>
            </u-dropdown> -->
            <view style="background-color: #fff;width: 100%; padding:10rpx;" class="flex">
                <u-search placeholder="" v-model="params.storeName" bg-color="#F2F2F2" @search="search"
                    :show-action="false"></u-search>
            </view>
        </view>
        <view class="content">
            <view class="item flex" v-for="(item, index) in list" :key="index" @click="handleDetails(item)">
                <view style="width: 249rpx; height: 249rpx; border-radius: 22rpx; margin-right: 20rpx;">
                    <image :src="'https://famen-img.oss-cn-beijing.aliyuncs.com/'+item.companyLogo" style="width: 100%; height: 100%;" />
                </view>
                <view class="right">
                    <view class="name"> {{ item.storeName }} </view>
                    <view class="type flex flex-ai-c">
                        <image src="../../static/sjcjgc@3x.png" style="width: 173rpx; height: 48rpx;" />
                        <view style="margin-left: 20rpx;">{{ item.years }}年</view>
                        <view style="margin-left: 20rpx;">{{ item.companyArea }}㎡</view>
                    </view>
                    <view class="main">主营:{{ item.mainProducts }}</view>
                </view>
            </view>
            <view class="item" v-if="list.length == 0">
                <u-empty text="暂无数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            show: false,
            // 搜索框
            keyword: "",
            // 筛选信息
            form: {
                value: '',
                value1: '',
            },
            imgHeight: 0,
            maskCloseAble: true,
            // 下拉框数据
            options: [],
            list: [],
            // 基础参数
            params: {
                currentPage: 1,
                pageSize: 10,
                storeName: "",
            },
            totalPage: 10,
        }
    },
    onLoad() {
        this.loadData(true);
    },
    onReachBottom() {
        this.loadData(false)
    },
    methods: {
        loadData(flag) {
            // console.log(this.totalPage);
			// console.log(this.params.currentPage);
            if (this.totalPage >= this.params.currentPage) {

                uni.showLoading({
                    title: '加载中...',
                    mask: true,
                });

                uni.$req.post('/famenApi/system/info/listForExternal', this.params).then(res => {
                    uni.hideLoading();
                    if (res.code == "200") {
                        this.totalPage = res.data.totalPage;
                        if (flag) {
                            this.list = [];
                        }
                        this.list.push(...res.data.totalList);
                        if (res.data.totalList.length > 0) {
                            this.params.currentPage++;
                        }
                    } else {
                        this.list = [];
                    }
                }).finally(() => {
                    this.loadingShow = "hide";
                });

                // 获取商品列表
            }
        },
        // 搜索
        search() {
            // console.log(this.keyword)
            // 获取列表信息
            this.totalPage = 10
            this.loadData(true);
        },
        // 跳转详情页
        handleDetails(item) {
            uni.$u.route({
                url: "pages/merchant/details",
                params: {
                    id: item.id,
                    years:item.years
                }
            });
        },
        onImgLoad(e) {
            // 当图片加载完成后，获取图片的原始宽度和高度，并根据宽度计算出高度
            const { width, height } = e.mp.detail;
            this.imgHeight = (height / width) * 100; // 高度 = 原始高度 / 原始宽度 * 100
        },
        // 关闭
        close() {
            // this.show=false
        }
    }
}
</script>

<style lang="scss" scoped>
.img {
    width: 100%;
}

.content {
    padding: 12rpx 12rpx 0 12rpx;

    .item {
        margin-bottom: 16rpx;
        padding: 21rpx 40rpx 15rpx 23rpx;
        background-color: #fff;
        border-radius: 22rpx;
        cursor: pointer;

        .right {
            width: 60%;

            .name {
                margin-top: 10rpx;
                height: 55rpx;
                font-size: 34rpx;
                color: #1E1E1E;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .type {
                margin: 20rpx 0 28rpx;
                font-size: 30rpx;
                color: #262828;
            }

            .main {
                height: 86rpx;
                font-size: 31rpx;
                color: #6F6F6F;
                line-height: 44rpx;
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
            }
        }
    }
}
</style>